import { defineComponent, nextTick, onMounted, reactive, ref, Ref, h } from "vue";
import layoutTitle from '@/components/common/tipTitle';
import layoutLoading from '@/components/common/loading';

import EchartsMethods from '@/chart/index';
import style from './style/index.module.scss'
const FLEXCENTER = 'flex items-center'
export default defineComponent({
    name: 'PersonnelDataAnalysis',
    components: {
        layoutTitle,
        layoutLoading
    },
    setup(_, { }) {
        type moduleLoadingKey = 'videoLayoutLoading'

        const loading = ref(false);
        const currentWeekIdx = ref(0);
        const videoLayoutRef = ref<HTMLElement | null>(null);

        const peopleData = [
            { num: 123, label: '18-25岁' },
            { num: 145, label: '26-40岁' },
            { num: 46, label: '40-60岁' },
            { num: 37, label: '60岁以上' },
        ]

        const state = reactive({
            chartView: EchartsMethods.indexEchartsPie({}),
            chartViewPie2: EchartsMethods.indexEchartsPie2({}),
            indexEchartsPie3: EchartsMethods.indexEchartsPie3({}),
            chartViewBar: Object.create(null),
            indexEcharts3DBar: EchartsMethods.indexEcharts3DBar({}),
            indexEchartsLine: EchartsMethods.indexEchartsLine({}),
            indexEchartsLine2: EchartsMethods.indexEchartsLine2({}),
        })

        /** 页面所有的loading状态**/
        const loadingStatus: ObjectWithClose<moduleLoadingKey> = reactive({
            videoLayoutLoading: {}
        })

        /** - 职务分布的canvas实例*/
        const chartValEmits = (e) => {
            state.chartViewBar = EchartsMethods.indexEchartsBar({}, e)
        }

        /** -查询入职/离职*/
        const changeWeek = (item, index) => {
            currentWeekIdx.value = index
        }

        //关闭loading
        let closeLoading = (item: moduleLoadingKey, type: boolean) => type ? loadingStatus[item].close?.() : loadingStatus[item].error?.('加载失败');

        setTimeout(() => {
            closeLoading('videoLayoutLoading', true)
        }, 1500)

        /** - 性别及年龄分布*/
        const GendeAgeDistribution = () => {
            return <div class='h-[calc(100%-36px)]'>
                <Chart-view chart-option={state.chartView} auto-resize={true} height="100%" style="height:calc(100% - 210px);width:100%;"></Chart-view>
                <div class={'w-full h-[calc(100%-222px)] pt-[40px] '}>
                    <ul class={[style.perBgImg, 'mb-[15px] flex  justify-center', FLEXCENTER]}>
                        {
                            peopleData.map(item => {
                                return (
                                    <li class='flex-1 text-center'>
                                        <p class={'text-(#0069B3 27px) font-[var(--font-pang)] italic tracking-[4px]'}>{item.num}</p>
                                        <p class={'text-(#FFF 14px) mt-[5px]'}>{item.label}</p>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <ul class={[style.perBgImgTwo, FLEXCENTER]}>
                        <li class={'w-[38%] border-r-(1px solid #07B0FF) text-center'}>
                            <p class={'text-(#0069B3 27px) font-[var(--font-pang)] italic tracking-[4px]'}>387</p>
                            <p class={'text-(#FFF 14px) mt-[5px]'}>共计总人数</p>
                        </li>
                        <li class={'flex-1 pl-[85px]'}>
                            <p class={['text-(#fff 14px)', FLEXCENTER]}><label class={'text-(#2558FF 26px) font-[var(--font-pang)] italic tracking-[4px] mr-[5px]'}>男</label>136人/65.2%</p>
                            <p class={['text-(#fff 14px) mt-[3px]', FLEXCENTER]}><label class={'text-(#FF0747 26px) font-[var(--font-pang)] italic tracking-[4px] mr-[5px]'}>女</label>78人/35.8%</p>
                        </li>
                    </ul>
                </div>
            </div>

        }

        onMounted(() => {
            nextTick(() => {
                loading.value = true;
                loadingStatus.videoLayoutLoading = layoutLoading({ el: videoLayoutRef.value!, show: true });
            })
        })
        return () => (
            <div class={'w-full h-[calc(100%-13px)] mt-[13px]  flex gap-[20px]'}>
                {/* 左侧 */}
                <div class={'flex-[0_0_456px]  h-full pt-[23px]'} style='background: linear-gradient(90deg, #111325 0%, #121F3E 100%);'>
                    <div class={'h-[60%] w-full'} ref={videoLayoutRef}>
                        <layoutTitle title='性别及年龄分布'></layoutTitle>
                        {
                            loading.value && loadingStatus.videoLayoutLoading.moduleLoading && <GendeAgeDistribution />
                        }
                    </div>
                    <div class={'h-[40%] w-full mt-[40px]'}>
                        <layoutTitle title='岗位分布'></layoutTitle>
                        {
                            loading.value && <Chart-view chart-option={state.chartViewBar} onChartValEmit={chartValEmits} auto-resize={true} height="100%" style="height:calc(100% - 76px);width:100%;" ></Chart-view>
                        }
                    </div>
                </div>
                {/* 中间 */}
                <div class={'flex-auto h-full overflow-hidden'}>
                    <div class={'w-full h-[calc((100%-20px)/2)]'} style='background: linear-gradient(0deg, #112A54 0%, #111325 100%);'>
                        <layoutTitle title='部门分布'></layoutTitle>
                        {
                            loading.value && <Chart-view chart-option={state.indexEchartsPie3} auto-resize={true} height="100%" style="height:calc(100% - 36px);width:100%;"></Chart-view>
                        }
                    </div>
                    <div class={'w-full h-[calc((100%-20px)/2)] mt-[20px] border-(1px solid #273654) pt-[30px]'} style='background: linear-gradient(-84deg, #152140 0%, #121636 100%);'>
                        <div class='flex items-center justify-between w-full'>
                            <layoutTitle title='入职/离职状况'></layoutTitle>
                            <ul class='flex items-center pr-[20px]'>
                                {
                                    ['上周', '本周'].map((item, index) =>
                                        <li class={['text-(#747B90 13px) mr-[10px] last-of-type:mr-[0] bg-[#232E49] p-[4px_10px]  cursor-pointer', { [style.currentWeekAcive]: index === currentWeekIdx.value }]} onClick={() => changeWeek(item, index)}>{item}</li>
                                    )
                                }
                            </ul>
                        </div>
                        {
                            loading.value && <Chart-view chart-option={state.indexEchartsLine2} auto-resize={true} height="100%" style="height:calc(100% - 36px);width:100%;" ></Chart-view>
                        }
                    </div>
                </div>
                {/* 右侧 */}
                <div class={'flex-[0_0_456px] h-full pt-[23px]'} style="background: linear-gradient(90deg, #121F3E 0%, #111325 100%);">
                    <div class={'h-[30%] w-full'}>
                        <layoutTitle title='政治面貌分布'></layoutTitle>
                        {
                            loading.value && <Chart-view chart-option={state.chartViewPie2} auto-resize={true} height="100%" style="height:calc(100% - 36px);width:100%;" ></Chart-view>
                        }
                    </div>
                    <div class={'h-[40%] w-full'}>
                        <layoutTitle title='工龄分布'></layoutTitle>
                        {
                            loading.value && <Chart-view chart-option={state.indexEchartsLine} auto-resize={true} height="100%" style="height:calc(100% - 36px);width:100%;" ></Chart-view>
                        }
                    </div>
                    <div class={'h-[30%] w-full'}>
                        <layoutTitle title='学历分布'></layoutTitle>
                        {
                            loading.value && <Chart-view chart-option={state.indexEcharts3DBar} auto-resize={true} height="100%" style="height:calc(100% - 36px);width:100%;" ></Chart-view>
                        }
                    </div>
                </div>
            </div>
        )
    }
})